import { Button, ButtonProps, View } from "@tarojs/components";
import { twMerge } from "tailwind-merge";
import { cva } from "class-variance-authority";
import { ReactNode } from "react";
import ByIcon from "./ByIcon";
import Taro from "@tarojs/taro";

type ByButtonProps = {
  /**
   * 跳转页面
   */
  to?: string;
  /**
   * 跳转方法
   */
  toFn?: typeof Taro.redirectTo | typeof Taro.reLaunch;

  inlineBlock?: boolean;
  round?: boolean;

  fontSize?: string;
  colorStyle?: string;

  variant?: "outline" | "solid" | "dashed" | "filled";
  type?: "primary" | "error" | "info" | "success" | "warning";
  size?: "small" | "default" | "large";

  loading?: boolean;
  disabled?: boolean;

  icon?: string;
  iconColor?: string;

  iconSize?: number;
  openType?: ButtonProps.OpenType;
  children?: ReactNode;
  className?: string;

  onClick?: (event) => void;
  onGetPhoneNumber?: (e: any) => void;
};

/**
 * 处理button样式
 */
const varsBtn = cva(
  "relatice flex-center px-0 !w-full h-full text-[inherit] bg-[inherit] border-none shadow-none",
  {
    variants: {
      size: {
        small: "px-2",
        default: "px-4",
        large: "px-4 py-3",
      },
    },
  }
);

/**
 * 处理 ByButton 组件主体样式
 */
const vars = cva("relative py-0 overflow-hidden", {
  variants: {
    inlineBlock: {
      false: "flex mx-auto",
      true: "inline-flex",
    },

    //
    type: {
      info: "type-info",
      error: "type-error",
      warning: "type-warning",
      primary: "type-primary",
      success: "type-success",
    },

    disabled: {
      true: "opacity-60",
    },

    //
    variant: {
      outline:
        "border border-solid border-[var(--type-color)] text-[var(--type-color)]",
      dashed:
        "border border-solid border-dashed border-[var(--type-color)] text-[var(--type-color)]",
      solid: "bg-[var(--type-color)] text-white",
      filled: "bg-[var(--type-color-bg)] text-[var(--type-color)]",
      text: "",
      link: "",
    },

    size: {
      small: "h-[56px] text-xs",
      default: "h-[72rpx]",
      large: "h-[96rpx] text-lg",
    },

    round: {
      true: "rounded-full",
      false: "rounded-lg",
    },
  },
});

export default ({
  to,
  toFn,

  loading,
  disabled,
  variant = "solid",
  size = "default",
  type = "primary",
  round = false,
  openType,
  inlineBlock = false,
  className,

  icon,
  iconColor,
  iconSize,
  children,

  onClick,
  onGetPhoneNumber,
}: ByButtonProps) => {
  const handleTap = (event) => {
    if (!(loading || disabled)) {
      if (to?.trim()) {
        const fn = toFn || Taro.navigateTo;
        fn({ url: to });
      }

      onClick?.(event);
    }
  };

  return (
    <View
      className={twMerge(
        vars({ type, size, variant, round, disabled, inlineBlock }),
        className
      )}
      onClick={handleTap}
    >
      <Button
        openType={openType}
        loading={loading}
        className={varsBtn({ size })}
        onGetPhoneNumber={onGetPhoneNumber}
        style="font-size: inherit;font-weight: 400;"
      >
        {icon && (
          <ByIcon
            className="mr-1"
            name={icon}
            color={iconColor}
            size={iconSize}
          />
        )}

        {children}
      </Button>
    </View>
  );
};
